import React, { useEffect, useState } from 'react';
import './Addcar.scss'
import {useNavigate, useSearchParams} from "react-router-dom"
import { PlusOutlined } from '@ant-design/icons';
import {
  Form,
  Input,
  Button,
  Radio,
  Select,
  Cascader,
  DatePicker,
  InputNumber,
  TreeSelect,
  Switch,
  Checkbox,
  Upload,
} from 'antd';
import * as service from '../../../../api/index'
import * as zzservice from '../../../../api/indexzz';

const { RangePicker } = DatePicker;
const { TextArea } = Input;
interface Props {

}
function Addcar(props:Props) {
    let navigate=useNavigate()
    const [type,setType]=useState([])
    const [call,setCall]=useState([])
    const [tu,setTu]=useState<any>('')
    const [below,setBelow]=useState<any>({})
    const [form] = Form.useForm();

    const onFinish = async(values: any) => {
        values.pic=tu
        console.log('Success:', values);
        if(values.id){
          // var res1=await service.car_xiucar(values)
          var res1=await zzservice.car_updateCar2(values)
        }else{
          // var res=await service.car_addcar(values)
          var res=await zzservice.car_addCar(values)
        }
        navigate('/index/Vehicle/Management')
        
      };
      
      const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
       
      };

      let [params, setParams] = useSearchParams ();
      var fa=async()=>{
        var id=params.get('id')
        if(id){
          // var res2=await service.car_edit({id})
          var res2=await zzservice.car_updateCar1({id})
          console.log(res2.data.data);
          
          res2.data.data.pic=''
          // res2.data.numberplate=''
          // res2.data.saddle=''

          form.setFieldsValue(res2.data.data)
          setBelow(res2.data.data)

        } 
      
        var res=await service.car_type()
        // var res1=await service.car_classification()
        var res1=await zzservice.car_fencar()
        setType(res.data)
        setCall(res1.data.data)

       }
       useEffect(()=>{
           fa()
       },[])

       var onChange = (e:any)=>{
        var reader = new FileReader();
        reader.readAsDataURL(e.target.files[0])
        reader.onload = function(){
            setTu(this.result)
    }
  
    }
    return (
        <div className='addcar'>
             <div className="hai">
            <div className='hhh'>
                <div className="h"></div>
            <div className="hh1">新增车辆</div>
            </div>
            <Button onClick={()=>{navigate(-1)}}>返回</Button>
            </div>
            <Form
            form={form}
        name="basic"
        labelCol={{ span: 8 }}
        wrapperCol={{ span: 16 }}
        style={{ maxWidth: 600 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
      >
       
        <Form.Item
         label="id"
         name="id"
         hidden
        >
          <Input  placeholder='请输入'/>
        </Form.Item>
        <Form.Item
         label="车辆名称"
         name="name"
        rules={[{ required: true, message: '车辆名称不能为空!' }]}
        >
          <Input  placeholder='请输入'/>
        </Form.Item>
        <Form.Item 
        label="车牌号"
        name="numberplate"
        rules={[{ required: true, message: '车牌号不能为空!' }]}
        >
          <Input  placeholder='请输入'/>
        </Form.Item>
        <Form.Item 
        label="车型"
        name="type"
        rules={[{ required: true, message: '车型不能为空!' }]}
        >
          <TreeSelect treeData={type}/>
        </Form.Item>
        <Form.Item 
        label="分类"
        name="sort"
        rules={[{ required: true, message: '分类不能为空!' }]}
        >
          <TreeSelect treeData={call}/> 
        </Form.Item>
        <Form.Item 
        label="品牌型号"
        name="brand"
        rules={[{ required: true, message: '品牌型号不能为空!' }]}
        >
          <Input  placeholder='请输入'/>
        </Form.Item>
        <Form.Item 
        label="车座"
        name="saddle"
        >
          <Input  placeholder='请输入'/>
        </Form.Item>
        <Form.Item label="裸车价" name="price">
          <Input  placeholder='请输入'/>
        </Form.Item>
        <Form.Item
         label="状态"
         name="status"
         rules={[{ required: true, message: '状态不能为空!' }]}
        >
          <Select>
          <Select.Option value={0}>空闲</Select.Option>
          <Select.Option value={1}>使用中</Select.Option>
        </Select>
        </Form.Item>
        <Form.Item 
                    label="选择图片"
                    name="pic"
                    >
                    <Input type='file' onChange={onChange}/>
                </Form.Item>
        
        <Form.Item >
          <Button type="primary" htmlType="submit" style={{marginLeft:180}}>
          
            {
                form.getFieldValue('id')?'更新':'新增'
              }
            </Button>
        </Form.Item>
      </Form>
        </div>
    );
}

export default Addcar;